<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="https://gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.68.3" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>第一篇文章 &middot; 我的博客</title>
  <meta name="description" content="" />

  
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0self ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/my_technology_blog/"><h1>我的博客</h1></a>
      <p class="lead">
       这里是田帅康的个人博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/my_technology_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2020. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>第一篇文章</h1>
  <time datetime=2019-04-01T00:00:00Z class="post-date">Mon, Apr 1, 2019</time>
  <h3 id="django与vue">Django与Vue</h3>
<p>Django是一个开放源代码的Web应用框架，由Python写成。采用了MTV的框架模式，即模型M，视图V和模版T。它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站的，即是CMS（内容管理系统）软件。并于2005年7月在BSD许可证下发布。这套框架是以比利时的吉普赛爵士吉他手Django Reinhardt来命名的。</p>
<h3 id="框架介绍">框架介绍</h3>
<p>Django 项目是一个Python定制框架，它源自一个在线新闻 Web 站点，于 2005 年以开源的形式被释放出来。Django 框架的核心组件有：</p>
<ol>
<li>用于创建模型的<a href="https://baike.baidu.com/item/%E5%AF%B9%E8%B1%A1%E5%85%B3%E7%B3%BB%E6%98%A0%E5%B0%84">对象关系映射</a></li>
<li>为最终用户设计的完美管理界面</li>
<li>一流的 URL 设计</li>
<li>设计者友好的模板语言</li>
<li>缓存系统。</li>
</ol>
<h3 id="部署">部署</h3>
<p>一.django-admin startproject mysite # 创建mysite项目 django-admin startapp blog # 创建blog应用 一、接下来就是安装关于vue 的东西了<br>
1、首先安装node.js，官网地址：<!-- raw HTML omitted --><a href="https://nodejs.org/zh-cn/download/">https://nodejs.org/zh-cn/download/</a><!-- raw HTML omitted --><br>
2、使用npm淘宝镜像，避免npm下载速度过慢的问题   npm install -g cnpm &ndash;registry=https://registry.npm.taobao.org<br>
3、使用cnpm 下载vue-cli cnmp install -g @cue/cli</p>
<p>二.在django项目中创建vue项目
首先，进去django项目的项目目录中，执行：<br>
vue init webpack firstvue## firstvue为前端项目的名称，可自定义。创建的项目会跟django中的app一样的目录登记。类似一个前端app一样。<br>
mysite 文件夹  blog 文件夹   和 firstvue文件夹  要在同一目录级别<br>
在创建时，会弹出很多选择项，根据自己需求自定义修改。也可以全部回车，使用默认的。这里我就直接全部回车。</p>
<p>三.编写vue前端项目<br>
cd firstvue## 进入到上一部创建的firstvue项目中   cnpm install        ## 安装需要的依赖模块   cnpm run dev        ## 运行调式的服务，会启动一个web服务，访问localhost:8080 即可调式</p>
<p>四.vue项目写完后，打包vue项目，然后修改django配置，将vue集成到django中<br>
cnpm run build        ## 打包vue项目，会将所有东西打包成一个dist文件夹</p>
<p>五.接下来就是配置django中的setting文件了：
<img src="/my_technology_blog/01.png" alt=""></p>
<p>六.修改django的主目录的urls文件：<br>
<img src="/my_technology_blog/02.png" alt=""></p>
<p>七.启动django服务，访问localhost:8000 则可以出现vue的首页。
python manage.py runserver<br>
<img src="/my_technology_blog/03.jpg" alt=""></p>
<h3 id="1-配置静态文件">1. 配置静态文件</h3>
<p>对于静态文件,也就是 我们<code>Templates</code>存放<code>html</code>文件视图所对应相关的<code>JS</code>,<code>CSS</code>,<code>图片</code>存放的对方 通常我们在 程序目录下建立一个文件夹-&gt;<code>static</code>(这里写死就可以了,不要换别的名字)</p>
<p>在<code>settings.py</code>文件下添加如下配置,意思是在视图对应的静态文件会自动在<code>static</code>目录下检索</p>
<pre><code>STATICFILES_DIRS = (os.path.join(BASE_DIR,'static'),)
</code></pre><h3 id="2-配置模板文件">2. 配置模板文件</h3>
<p>要使我们<code>Templates</code>存放的文件生效,需要如下配置,意思是模板文件在<code>templates</code>文件夹下进行检索</p>
<pre><code>TEMPLATE_DIRS = (os.path.join(BASE_DIR,  'templates'),)
</code></pre><h3 id="django结构分析">django结构分析</h3>
<blockquote>
<p><code>Django</code> 程序
<code>Django</code> -  对整个程序进行配置
<code>settings</code> - 配置文件
<code>usls</code> -  url对应关系 对应逻辑函数 为每个逻辑函数 分配相应视图
<code>wsgi</code> - 遵循WSIG规范, uwsgi + nginx
<code>manage.py</code> - #管理Django 程序</p>
</blockquote>
<blockquote>
<p><code>APP</code>
<code>migrations</code> 数据库操作记录-&gt;相应表结构发生变化,比如说字段类型,并不是增删改成的变动
<code>admin</code> Django 为我们提供的后台管理
<code>apps</code>   配置当前APP
<code>models</code> ORM,写指定的类通过命令可以创建数据库结构.
<code>tests</code> 单元测试
<code>Views</code> 业务逻辑代码</p>
</blockquote>

</div>


    </main>

    
      
    
  </body>
</html>
